<template>
  <div class="px-5">
    <Form
      :model="formState"
      ref="ruleForm"
      :label-col="{ style: { width: '150px' } }"
      :wrapper-col="{ style: { width: 'calc(100% - 150px)' } }"
    >
      <div class="bg-white !p-5">
        <h3 class="text-xl mb-5">联盟基础配置</h3>
        <FormItem label="联盟名称：" name="name">
          <Input v-model:value="formState.name" style="width: 400px" disabled />
        </FormItem>
        <h3 class="text-xl mb-5">推广配置</h3>
        <FormItem label="产品推入数量：">
          <RadioGroup v-model:value="pushLimit">
            <Radio :style="radioStyle" :value="WhetherOrNot.NO">不限制推入数量</Radio>
            <Radio :style="radioStyle" :value="WhetherOrNot.YES"
              >限制最多推入
              <InputNumber
                v-if="pushLimit === WhetherOrNot.YES"
                v-model:value="formState.productLimit"
                :precision="0"
                :min="1"
                class="w-28 mx-2"
              >
                <template #addonAfter>个</template>
              </InputNumber>
            </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="自动推入选品广场：">
          <div class="flex items-center gap-2.5">
            <Switch
              v-model:checked="formState.autoSquare"
              :checkedValue="WhetherOrNot.YES"
              :unCheckedValue="WhetherOrNot.NO"
            />
            <div class="text-[#86909C]"
              >开启后，允许把产品推入当前组织选品广场，组织的会员可分销产品</div
            >
          </div>
        </FormItem>

        <h3 class="text-xl mb-5">统一分润配置</h3>
        <FormItem label="平台服务费：">
          <div class="flex items-center">
            <span>每笔订单佣金中抽取</span>
            <InputNumber
              v-model:value="formState.platformCommission"
              :min="0"
              :max="100 - (formState.releaseOrgCommission + formState.distributionOrgCommission)"
              :precision="0"
              class="w-28 mx-2"
            >
              <template #addonAfter>%</template>
            </InputNumber>
            <span>作为平台服务费</span>
          </div>
        </FormItem>
        <FormItem label="发布组织服务费：">
          <div class="flex items-center">
            <span>每笔订单佣金中抽取</span>
            <InputNumber
              v-model:value="formState.releaseOrgCommission"
              :min="0"
              :max="100 - (formState.platformCommission + formState.distributionOrgCommission)"
              :precision="0"
              class="w-28 mx-2"
            >
              <template #addonAfter>%</template>
            </InputNumber>
            <span>作为发布组织服务费</span>
          </div>
        </FormItem>
        <FormItem label="分销组织服务费：">
          <div class="flex items-center">
            <span>每笔订单佣金中抽取</span>
            <InputNumber
              v-model:value="formState.distributionOrgCommission"
              :min="0"
              :max="100 - (formState.platformCommission + formState.releaseOrgCommission)"
              :precision="0"
              class="w-28 mx-2"
            >
              <template #addonAfter>%</template>
            </InputNumber>
            <span>作为分销组织服务费</span>
          </div>
        </FormItem>
        <FormItem label="分销者佣金：">
          <div>
            <span>剩余</span>
            <span class="text-yellow-500 mx-2 font-bold">{{ distributionCommission }}%</span>
            <span>作为分销者佣金</span>
          </div>
        </FormItem>
      </div>

      <div class="mt-3 bg-white p-3 text-center">
        <Button type="primary" @click="handleOk">保存配置</Button>
      </div>
    </Form>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, reactive, ref, unref, watch } from 'vue';
  import {
    Form,
    FormItem,
    RadioGroup,
    Radio,
    Switch,
    InputNumber,
    Input,
    Button,
  } from 'ant-design-vue';
  import { editMerchantInfo, getUnionInfoConfig } from '@/api/hby/resourceLeague/index';
  import { UnionInfoConfig } from '@/api/hby/resourceLeague/type';
  import { WhetherOrNot } from '@/enums/customFormEnum';
  import { useMessage } from '@/hooks/web/useMessage';
  // import { RuleObject } from 'ant-design-vue/lib/form';

  const radioStyle = reactive({
    display: 'flex',
    height: '30px',
    lineHeight: '30px',
  });

  onMounted(() => {
    queryUnionInfoConfig();
  });

  const cacheProductLimit = ref<number>(0);
  const pushLimit = ref(WhetherOrNot.NO);
  const queryUnionInfoConfig = async () => {
    formState.value = await getUnionInfoConfig(1);
    cacheProductLimit.value = unref(formState).productLimit;
    pushLimit.value = unref(formState).productLimit === -1 ? WhetherOrNot.NO : WhetherOrNot.YES;  // 是否限制推入, 不限制推入数量 -1
  };
  
  watch(
    () => unref(pushLimit),
    (newVal) => {
      if(newVal === WhetherOrNot.YES){
        formState.value.productLimit = unref(cacheProductLimit) <= 0 ? 1 : unref(cacheProductLimit);
      }else{
        cacheProductLimit.value = unref(formState).productLimit;
        formState.value.productLimit = -1;
      }
    }
  );

  // 分销者佣金剩余
  const distributionCommission = computed(() => {
    return (formState.value.distributionCommission =
      100 -
      (formState.value.platformCommission +
        formState.value.releaseOrgCommission +
        formState.value.distributionOrgCommission));
  });

  const formState = ref<UnionInfoConfig>({
    name: '百会精选',
    platformCommission: 10,
    releaseOrgCommission: 10,
    distributionOrgCommission: 10,
    autoSquare: WhetherOrNot.NO,
    productLimit: -1,
  } as UnionInfoConfig);

  const ruleForm = ref<any | null>(null);

  const { createMessage } = useMessage();
  async function handleOk() {
    formState.value.distributionCommission = unref(distributionCommission);
    formState.value.id = 1;

    editMerchantInfo(unref(formState)).then(() => {
      createMessage.success('保存配置成功');
      queryUnionInfoConfig();
    });
  }
</script>
<style lang="less"></style>
